import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

import 'widget/manhua_list_item.dart';

class SearchBarScreen extends StatefulWidget {
  const SearchBarScreen({super.key});

  @override
  State<SearchBarScreen> createState() => _SearchBarScreenState();
}

class _SearchBarScreenState extends State<SearchBarScreen> {
  final TextEditingController _searchController = TextEditingController();

  // 统一尺寸和间距常量
  static const double _itemHeight = 120;
  static const double _rankSize = 38;
  static const double _spacingSmall = 10;
  static const double _spacingMedium = 16;
  static const double _spacingLarge = 25;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF2A1F3D),
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(
            Icons.arrow_back,
            color: Colors.white,
          ),
          onPressed: () => Navigator.pop(context), // 简化返回逻辑
        ),
        title: Container(
          height: 40,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8),
          ),
          child: TextField(
            controller: _searchController,
            decoration: const InputDecoration(
              prefixIcon: Icon(
                Icons.search,
                color: Colors.green,
              ),
              hintText: 'When a ReinDeer Knocks',
              border: InputBorder.none,
              contentPadding: EdgeInsets.symmetric(vertical: 8),
            ),
            style: const TextStyle(fontSize: 16),
          ),
        ),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(height: _spacingSmall),
              // 热门搜索项
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 12),
                padding: const EdgeInsets.symmetric(horizontal: 16),
                height: 50,
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: const Row(
                  children: [
                    Icon(
                      Icons.hot_tub_sharp,
                      color: Colors.green,
                    ),
                    SizedBox(width: _spacingMedium),
                    Text(
                      'The Sluttry Girl porn comic',
                      style: TextStyle(
                        color: Colors.black87,
                        fontSize: 15,
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: _spacingSmall),
              // 热门漫画列表
              GestureDetector(
                onTap: () {
                  // 搜索逻辑
                  GoRouter.of(context).pushNamed('manhua_list',
                      pathParameters: {'category': 'Hot Comics'});
                },
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  margin:
                      const EdgeInsets.symmetric(horizontal: 12, vertical: 16),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(8),
                    // 边框
                    border: Border.all(
                      color: Colors.grey.withOpacity(0.3),
                      width: 1,
                    ),
                  ),
                  child: Column(
                    children: [
                      SizedBox(
                        height: 20,
                      ),
                      const Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Icon(
                            Icons.hotel_class,
                            color: Colors.green,
                          ),
                          SizedBox(width: 4),
                          Text(
                            'Hot Comics',
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.w500,
                              color: Colors.black87,
                            ),
                          ),
                          Spacer(),
                          Icon(
                            Icons.arrow_right,
                            color: Colors.grey,
                          )
                        ],
                      ),
                      const SizedBox(height: _spacingLarge),
                      ListView.builder(
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        itemCount: 10,
                        itemBuilder: (context, index) {
                          return _buildComicItem(context); // 传递排名
                        },
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildComicItem(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 点击漫画条目的回调，可跳转详情页
      },
      child: Container(
        // padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              height: 30,
              width: 30,
              color: Colors.green,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(6),
                child: Center(
                  child: Text(
                    "1",
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 14,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              width: 12,
            ),
            // 封面图

            ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: Image.network(
                "https://c-ssl.dtstatic.com/uploads/blog/202303/27/20230327140414_78c0f.thumb.1000_0.jpg",
                width: 80,
                height: 120,
                fit: BoxFit.cover,
              ),
            ),
            const SizedBox(width: 12),
            // 标题等信息
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "偷腥九月天偷腥九月天偷腥九月天偷腥九月天偷腥九月天",
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    "这是一个副标题", // 这里副标题也用了标题，可根据实际数据调整
                    style: const TextStyle(
                      fontSize: 14,
                      color: Colors.grey,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 构建漫画列表项（增加排名参数）
  // Widget _buildComicItem(int rank) {
  //   return Container(
  //     height: 120,
  //     width: double.infinity,
  //     padding: const EdgeInsets.symmetric(vertical: 8),
  //     child: Row(
  //       crossAxisAlignment: CrossAxisAlignment.start,
  //       children: [
  //         // 排名容器
  //         Container(
  //           height: 38,
  //           width: 38,
  //           color: Colors.green,
  //           child: ClipRRect(
  //             borderRadius: BorderRadius.circular(6),
  //             child: Center(
  //               child: Text(
  //                 "$rank",
  //                 style: const TextStyle(
  //                   color: Colors.white,
  //                   fontSize: 14,
  //                   fontWeight: FontWeight.w600,
  //                 ),
  //               ),
  //             ),
  //           ),
  //         ),
  //         const SizedBox(width: 16),
  //         // 漫画信息项
  //         // ManhListItem(),

  //       ],
  //     ),
  //   );
  // }
}
